<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Layui入门案例</title>
<!--    引入layui的核心样式文件-->
    <link rel="stylesheet" href="./res/layui-v2.9.10/layui/css/layui.css">
</head>
<body>
    <h2>按钮</h2>
    <button class="layui-btn">普通按钮</button>
    <button class="layui-btn layui-bg-blue">普通按钮</button>
    <button type="button" class="layui-btn layui-bg-orange">橙色按钮</button>
    <button type="button" class="layui-btn layui-bg-red">红色按钮</button>
    <button type="button" class="layui-btn layui-bg-purple">紫色按钮</button>
    <button type="button" class="layui-btn layui-btn-disabled">禁用按钮</button>
    <hr>

    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-lg">大按钮</button>
        <button class="layui-btn">普通按钮</button>
        <button class="layui-btn layui-btn-sm">小按钮</button>
        <button class="layui-btn layui-btn-xs">超小按钮</button>
        <div style="width: 360px">
            <button class="layui-btn layui-btn-fluid">流体式按钮</button>
        </div>
        <div style="width: 360px">
            <button class="layui-btn layui-btn-fluid layui-btn-radius">流体式圆角按钮</button>
        </div>
    </div>
    <hr>
    <div class="layui-btn-group">
        <button class="layui-btn layui-bg-blue">详情</button>
        <button class="layui-btn layui-bg-orange">修改</button>
        <button class="layui-btn layui-bg-red">删除</button>
    </div>

    <hr>
    <h2>字体图标</h2>
    <i class="layui-icon layui-icon-github" style="font-size: 100px;color: #2f363c" ></i>
    <i class="layui-icon layui-icon-gitee" style="font-size: 100px;color: #ff5722" ></i>
    <div class="layui-btn-group">
        <button class="layui-btn layui-bg-blue">
            <i class="layui-icon layui-icon-about"></i>
            详情</button>
        <button class="layui-btn layui-bg-orange">
            <i class="layui-icon layui-icon-edit"></i>
            修改</button>
        <button class="layui-btn layui-bg-red">
            <i class="layui-icon layui-icon-delete"></i>
            删除</button>
    </div>

    <hr>
    <h2>静态表格</h2>
    <div class="layui-col-md-offset3 layui-col-md6 layui-col-xs12 layui-col-sm-offset2 layui-col-sm8">
    <table class="layui-table" lay-even lay-skin="nob" lay-size="md">
        <tr>
            <th>表头1</th>
            <th>表头2</th>
            <th>表头3</th>
            <th>表头4</th>
        </tr>
        <tr>
            <td>单元格内容</td>
            <td>单元格内容</td>
            <td>单元格内容</td>
            <td>单元格内容</td>
        </tr>
        <tr>
            <td>单元格内容</td>
            <td>单元格内容</td>
            <td>单元格内容</td>
            <td>单元格内容</td>
        </tr>
        <tr>
            <td>单元格内容</td>
            <td>单元格内容</td>
            <td>单元格内容</td>
            <td>单元格内容</td>
        </tr>
    </table>
    </div>


<!--    引入layui的模块文件(组件库)-->
<script src="./res/layui-v2.9.10/layui/layui.js"></script>
    <script>
        layui.use(function (){
            //加载layui的弹层组件
            let layer = layui.layer;
            //显示一个消息框，消息框消失后触发回调函数
            layer.msg('Hello Layui!',function (){
                //弹出一个警告框，图标为0（感叹号：0~6）
                layer.alert('这是一个警告框',{icon:0})
            })
        })

    </script>
</body>
</html>